
    <div class="table">
      <div class="res-cards cards-top">
        <div class="card-list">
          <button v-show="top_card_list.length==0" @click="addSelectedCardsToRes('top_card_list', 3)">放置到头部（3张）</button>
          <div class="card" v-for="card_item in top_card_list" v-html="cartNameToHtml(card_item._txt)"></div>
          <button v-show="top_card_list.length" @click="removeFromResCards('top_card_list')">重置</button>
        </div>
      </div>
      <div class="res-cards cards-mid">
        <div class="card-list">
          <button v-show="mid_card_list.length==0" @click="addSelectedCardsToRes('mid_card_list')">放置到中间（5张）</button>
          <div class="card" v-for="card_item in mid_card_list" v-html="cartNameToHtml(card_item._txt)"></div>
          <button v-show="mid_card_list.length" @click="removeFromResCards('mid_card_list')">重置</button>
        </div>
      </div>
      <div class="res-cards cards-btm">
        <div class="card-list">
          <button v-show="btm_card_list.length==0" @click="addSelectedCardsToRes('btm_card_list')">放置到底部（5张）</button>
          <div class="card" v-for="card_item in btm_card_list" v-html="cartNameToHtml(card_item._txt)"></div>
          <button v-show="btm_card_list.length" @click="removeFromResCards('btm_card_list')">重置</button>
        </div>
      </div>
    </div>
    <div class="submit">
      <button :disabled="!is_special" @click="submitResWithSpecial">报道</button>
      <button @click="is_change_card_list = true">改牌</button>
      <button :disabled="!(top_card_list.length&&mid_card_list.length&&btm_card_list.length)" @click="submitRes">提交</button>
    </div>
    <div class="my-card-list" >
      <div class="card" v-for="(card_item,card_index) in card_list"
        @mousedown="startSelectCard(card_item, card_index)"
        @mouseenter="trySelectCard(card_index)"
        @mouseup="endSelectCard()"
        :class="{
          selected: card_item.is_selected,
          used: card_item.is_used,
        }"
        v-html="cartNameToHtml(card_item._txt)">
      </div>
    </div>
    <div class="tool-bar">
      <div class="tool-item" :class="{disabled:com_two_list.length}">对子</div>
      <div class="tool-item" :class="{disabled:com_two_pair_list.length}">两对</div>
      <div class="tool-item" :class="{disabled:com_three_list.length}">三条</div>
      <div class="tool-item" :class="{disabled:com_straight_list.length}">顺子</div>
      <div class="tool-item" :class="{disabled:com_flush_list.length}">同花</div>
      <div class="tool-item" :class="{disabled:com_full_house_list.length}">葫芦</div>
      <div class="tool-item" :class="{disabled:com_four_list.length}">铁支</div>
      <div class="tool-item" :class="{disabled:com_straight_flush_list.length}">同花顺</div>
    </div>
    <div v-show="is_change_card_list" class="select-custom-card-list">
      <button @click="is_change_card_list = false">关闭</button>
      <button @click="submitChangedCardList">确定</button>
      <div class="card-list">
        <div class="card" 
          @click="card_item.is_selected=!card_item.is_selected"
          :class="{
            used: card_item.is_selected,
          }"
         v-for="card_item of CARD_LIST.slice(0,13)" v-html="cartNameToHtml(card_item._txt)">
        </div>
      </div>
      <div class="card-list">
        <div class="card" 
          @click="card_item.is_selected=!card_item.is_selected"
          :class="{
            used: card_item.is_selected,
          }"
         v-for="card_item of CARD_LIST.slice(13,26)" v-html="cartNameToHtml(card_item._txt)">
        </div>
      </div>
      <div class="card-list">
        <div class="card" 
          @click="card_item.is_selected=!card_item.is_selected"
          :class="{
            used: card_item.is_selected,
          }"
         v-for="card_item of CARD_LIST.slice(26,39)" v-html="cartNameToHtml(card_item._txt)">
        </div>
      </div>
      <div class="card-list">
        <div class="card" 
          @click="card_item.is_selected=!card_item.is_selected"
          :class="{
            used: card_item.is_selected,
          }"
         v-for="card_item of CARD_LIST.slice(39,52)" v-html="cartNameToHtml(card_item._txt)">
        </div>
      </div>
    </div>